<template>
  <div></div>
</template>

<script>
  import kendoDropDownList from "../modules/kendoUi/kendoDropDownList"

  function onMounted() {

    function onValueChanged(value){
      this.$emit("input", value);
    }
    onValueChanged = onValueChanged.bind(this);

    let {dataSource,  value} = this;

    let option = {
      dataSource,
      value,
      el: this.$el,
      onValueChanged
    };

    console.log(option);

    kendoDropDownList.init(option);
  }

  let props = {
    data: Array,
    dataSource: Object,
    value: {}
  };

  function updateValue(newValue){
    let el = this.$el;
    kendoDropDownList.updateSelectedValue({el, value: newValue})
  }

  function updateDataSource(newDataSource){
    let el = this.$el;
    kendoDropDownList.updateDataSource({el, dataSource: newDataSource})
  }

  export default {
    name: "dropDownList",
    mounted: onMounted,
    props,
    watch:{
      value: updateValue,
      dataSource: updateDataSource
    }
  }
</script>

